---
order: 0
title: Unit testing
description: An optional package for Pragmatic drag and drop with helpers for unit testing
---

## `DragEvent` polyfill

Pragmatic drag and drop heavily leverages `DragEvent`. However, many unit testing environments (eg
[jsdom](https://github.com/jsdom/jsdom)) don't polyfill `DragEvent`. We have created a `DragEvent`
polyfill will allow you to start leveraging `DragEvent` in unit testing environments.

```ts
import '@atlaskit/pragmatic-drag-and-drop/unit-testing/drag-event-polyfill';
```

Setup using [`jest`](https://jestjs.io/):

```ts
// jest.config.js
module.exports = {
	setupFiles: ['./test/setup-drag-events.js'],
};

// ./test/setup-drag-events.js
import '@atlaskit/pragmatic-drag-and-drop/unit-testing/drag-event-polyfill';
```

This polyfill will polyfill [`DragEvent`] as well the other globals that `DragEvent` requires:

- [`DataTransferItemList`]
- [`DataTransfer`]

### Differences from the specifications

This test environment polyfill intentially does not implement
[permissions](https://html.spec.whatwg.org/multipage/dnd.html#the-drag-data-store) (`"read/write"`,
`"read-only"`, or `"protected"`) for `DataTransfer` or `DataTransferItemList`. Implementing these
permissions would prevent the adding of data to the data transfer during the creation of a
`DragEvent`, which is super helpful for testing.

```ts
const event = new DragEvent('dragenter', {
	cancelable: true,
	bubbles: true,
});
event.dataTransfer?.items.add('hello world', 'text/plain');

target.dispatchEvent(event);
```

## `DOMRect` polyfill

Pragmatic drag and drop leverages `DOMRect`. Some unit testing environments (eg
[jsdom](https://github.com/jsdom/jsdom)) don't polyfill `DOMRect`. We have created a `DOMRect`
polyfill will allow you to start leveraging `DOMRect` in unit testing environments.

```ts
import '@atlaskit/pragmatic-drag-and-drop/unit-testing/dom-rect-polyfill';
```

Setup using [`jest`](https://jestjs.io/):

```ts
// jest.config.js
module.exports = {
	setupFiles: ['./test/setup-dom-rect.js'],
};

// ./test/setup-dom-rect.js
import '@atlaskit/pragmatic-drag-and-drop/unit-testing/dom-rect-polyfill';
```
